import React,{Component} from 'react'
import login from './Login.module.css'
import Lunbo from './Lunbo.js'
import particulars from './Particulars.module.css'
import { Input } from 'antd';
import header from './Header.module.css'
import * as api from '../api/getshangpinlist'
import {BrowserRouter as Router,Route,NavLink,Switch,Prompt,withRouter} from 'react-router-dom'


export default class Particulars extends Component{
	constructor(props) {
	    super(props)
		this.state={
			list:[],
			value:1
		}
	}
	tap(){
		// console.log(this.refs.ipt)
		let pnumipt=this.refs.ipt
		let num=parseInt(pnumipt.value)
		num++
		pnumipt.value=num
		// console.log(num)
		this.setState({
			value:num
		})
		// console.log(pnumipt)
	}
	tap1(){
		let pnumipt=this.refs.ipt
		let num=parseInt(pnumipt.value)
		if(num==0){
			return
		}
		num--
		pnumipt.value=num
		this.setState({
			value:num
		})
		// console.log(pnumipt)
	}
	tap3(){
		let uid=localStorage.getItem('uid')
		let pid=this.props.location.state.id
		// console.log(uid)
		// console.log(pid)
		// console.log(this.state.value)
		api.getaddproduct({uid:uid,pid:pid,pnum:this.state.value}).then(data =>{
			console.log(data)
			alert(data.data.msg)
		})
	}
	tap4(e){
		this.setState({
			value:e.target.value
		})
	}
	render(){
		return(
			<div className={particulars.dic}>
				{
					this.state.list.map((item)=>{
						return(
								<div  className={particulars.dl} key={item.pid}>
										<img src={item.pimg}/>
										<div className={particulars.right}>
											<h2>{item.pname}</h2>
											<dd>￥{item.pprice} <span>￥499.00</span></dd>
											<div className={particulars.cm}>
												<p>尺码：</p>
												<button id="size">s</button>
												<button id="size">m</button>
												<button id="size">xl</button>
												<button id="size">xxl</button>
												<button id="size">xxxl</button>
											</div>
											<div className={particulars.sl}>
												<p>数量：</p>
												<button type="button" onClick={()=>this.tap1()}>-</button>
												<input type="text"  ref="ipt" value={this.state.value} onChange={(e)=>this.tap4(e)}/>
												<button type="button" onClick={()=>this.tap()}>+</button>
											</div>
											<div className={particulars.btn}>
											<button className={particulars.btn1} onClick={()=>this.tap3()}>加入购物车</button>
											<button className={particulars.btn2}>立即购买</button>
											</div>
											
										</div>
								</div>
						)	
					})
				}
				
			</div>
		)
	}
	componentDidMount(){
		api.getdetaillist({id:this.props.location.state.id}).then(data =>{
			let arr=[]
			arr.push(data.data.data)
			this.setState({list:arr})
		})
	}
	componentWillReceiveProps(a){
		
	}
	
}